<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>

    <!-- font-icon -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css">
    <!-- bootstrap-core -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css">

    <!-- plugins -->
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

    <link rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/header.css">
    <link rel="stylesheet" href="${ctxFrontStatic }/style/app.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${ctxFrontStatic }/libs/html5shiv.min.js"></script>
    <script src="${ctxFrontStatic }/libs/respond.min.js"></script>
    <![endif]-->


</head>
<body>
<section class="main" style="padding-top: 20px">
    <div class="container-fluid ">

        <div class="wlk-top">
            <div class="row">
                <div class="col-sm-2">
                    <img src="${ctxFrontStatic }/images/send-message.png" alt=""/>
                </div>
                <div class="col-sm-3 " style="margin-left: -29px;">
                    <p class="p-title">发送短信</p>
                    <p class="p-en">Send Message</p>
                </div>
            </div>
        </div>
        <div class="wlk-bottom">
            <div style="color:red">${message}</div>
            <div class="message-cont">
                <div class="row">
                    <div class="col-sm-12">
                        <form action="/front/sendMessage/send" id="sendMessageForm" method="post"  enctype="multipart/form-data" >
                            <div class="message-content">
                                <p class="message-title">短信内容</p>

                               <%-- <button type="button" class="btn btn-default"><img src="${ctxFrontStatic }/images/template.png"
                                                                                   class="btn-img" alt=""/>模板选择
                                </button>
                                <button type="button" class="btn btn-default">新建模板</button>--%>
                                <div class="message-text">
                                    <textarea name="msg" id="phone-text" cols="70" rows="5" placeholder="请输入短信内容"
                                              class="text-con"></textarea>
                                    <div class="row autograph">
                                        <div class="col-sm-12">
                                            <input type="checkbox" name="check" id="check-name"/>使用签名
                                            <input id="autograph" name="sign" type="text"  placeholder="请输入签名"/>
                                        </div>
                                        <div class="col-sm-12 ">
                                            <p class="text-num pull-right">总计<span class="length">0</span>个字,第<span
                                                    class="strip">1</span>条<span
                                                    class="remainder">0</span>/70个字
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="message-content">
                                <p class="message-title">号码附件导入</p>
                               <%--
                                <a href="javascript:;" class="file btn btn-default">
                                    <img src="${ctxFrontStatic }/images/bulk-import.png" class="btn-img" alt=""/>
                                    <span>批量导入</span>
                                </a>--%>
                                <input type="file" name="file" id="">
                                <!--<button type="button" class="btn btn-default"><img src="${ctxFrontStatic }/images/address.png"-->
                                <!--class="btn-img" alt=""/>通讯录-->
                                <!--</button>-->
                            </div>
                            <div class="message-content">
                                <p class="message-title">号码手动填写</p>
                                <div class="message-text">
                                    <textarea name="phones" cols="70" rows="6" class="text-con"  placeholder="多个号码之间用逗号隔开"></textarea>
                                </div>
                                <div>
                                    <input type="checkbox" name="check">定时发送
                                </div>
                                <input type="submit" class="btn btn-info" value="提交发送" />
                            </div>
                        </form>
                    </div>
                    <div class="col-sm-10 col-sm-offset-2">
                        <div class="phone-cont">
                            <div class="phone-time">
                                <p>今天下午<span>12:00</span></p>
                            </div>
                            <div class="cont">
                                <div class="phone-txt">
                                    <div class="text">test</div>
                                </div>
                            </div>
                        </div>
                        <img src="${ctxFrontStatic }/images/phone.png" class="phone" alt=""/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!--js-->
<script src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script src="${ctxFrontStatic }/js/navbar.js"></script>

<script>
    $(function () {

        $("#sendMessageButton").click(function () {
            $("#sendMessageForm").submit(function(){
                alert("提交1");
            });
            alert("提交2");
        })
        /*function sendMessage() {
            alert(11)

        }*/

        var $temp = $('.phone-cont .cont').clone();
        $('#phone-text , #autograph').on('input', function () {
            let textVal = $('#phone-text').val(),  //文本域的内容
                len = textVal.length,
                inputVal = $('#autograph').val(),//签名处的内容
                checkState = $('#check-name').prop('checked'),//复选框状态
                result = textVal ? '' : $temp.find('.text').text(inputVal + '').end().html(),
                i = Math.floor(len / 70),
                iy = len % 70 == 0 ? 70 : len - i * 70,
                idx = 0;
            // 判断当前复选框是否选中，选中的话 显示用户输入的签名 否则默认签名
            checkState ? inputVal = '【' + inputVal + '】' : inputVal = '【默认签名】';
            while (idx < len) {
                result += $temp.find('.text').text(inputVal + textVal.substring(idx, idx += 70)).end().html()
            }

            $('.phone-cont .cont').html(result);
            // $( '.text-num' ).children( 'span' ).text( len );
            checkState ? len =len + inputVal.length : len = len +6;
            $('.text-num').children('.length').text(len);
            $('.text-num').children('.strip').text(i+1);
            $('.text-num').children('.remainder').text(iy);
        });
        // $('#phone-text').on('input', function () {
        //     var str = $(this).val();
        //     var strArr = [];
        //     var n = 70;
        //     var l = str.length;
        //     var i = Math.floor(l / n);
        //     var iy = l % n == 0 ? 70 : l - i * 70;
        //     var autograph = $('#autograph').val();
        //     console.log($('#autograph').val());
        //
        //     for (var i = 0, l = str.length; i < l / n; i++) {
        //         var a = str.slice(n * i, n * (i + 1));
        //         strArr.push(a);
        //     }
        //     var html = '';
        //     for (var i = 0; i < strArr.length; i++) {
        //         if ($('#checkbox').attr('checked')) {
        //             html += '<div class="phone-txt">' +
        //                 '<div class="text">' +
        //                 '【'+autograph+'】'+
        //                 strArr[i] +
        //                 '</div>' +
        //                 '</div>'
        //         }else {
        //             html += '<div class="phone-txt">' +
        //                 '<div class="text">' +
        //                 autograph+
        //                 strArr[i] +
        //                 '</div>' +
        //                 '</div>'
        //         }
        //
        //     }

        // $('.text-num').children('.length').text(l);
        // $('.text-num').children('.strip').text(i);
        // $('.text-num').children('.remainder').text(iy);
        // $('.phone-cont').html(html);

        // });

    })
</script>
</body>
</html>